<template>
  <div ref="chart" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chart = ref(null);

// 模拟的数据，可以根据实际需求替换为真实数据
const data = {
  dates: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  totalUsage: [150, 200, 180, 220, 250, 270, 300],
  peakUsage: [100, 150, 130, 180, 200, 220, 250],
  troughUsage: [50, 80, 70, 90, 100, 120, 130],
  normalUsage: [70, 100, 90, 110, 130, 150, 160],
};

onMounted(() => {
  const myChart = echarts.init(chart.value);

  const option = {
    // title: {
    //   text: "近一周用电量",
    // },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["总用电量", "峰时用电量", "谷时用电量", "平时用电量"],
    },
    xAxis: {
      type: "category",
      data: data.dates,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "总用电量",
        type: "line",
        data: data.totalUsage,
      },
      {
        name: "峰时用电量",
        type: "line",
        data: data.peakUsage,
      },
      {
        name: "谷时用电量",
        type: "line",
        data: data.troughUsage,
      },
      {
        name: "平时用电量",
        type: "line",
        data: data.normalUsage,
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style scoped>
/* 添加一些样式以适应图表 */
</style>
